<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome 权限清单 - ChromeHub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
    <style>
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.95);
            /* 只在固定元素上使用毛玻璃效果 */
        }
        .glass-effect-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
        pre {
            background-color: #1a202c;
            color: #e2e8f0;
            padding: 1.5rem;
            border-radius: 0.75rem;
            overflow-x: auto;
            margin: 1.5rem 0;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        .section-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        code {
            font-family: 'Fira Code', monospace;
        }
        .inline-code {
            background-color: rgba(247, 250, 252, 0.8);
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-family: 'Fira Code', monospace;
            border: 1px solid rgba(226, 232, 240, 0.8);
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen">
    <!-- 导航栏 -->
    <nav class="glass-effect-nav fixed w-full top-0 z-50 shadow-sm">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index1.html" class="flex items-center space-x-2 group">
                        <img src="assets/logo5_256_256.png" alt="Chrome Logo" class="h-8 w-8 group-hover:rotate-180 transition-transform duration-500">
                        <span class="text-xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent">ChromeHub</span>
                    </a>
                </div>
                <div class="flex items-center">
                    <a href="index.html" class="flex items-center px-4 py-2 text-gray-600 hover:text-blue-600 transition-colors duration-300">
                        <i class="fas fa-arrow-left mr-2"></i>返回首页
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="max-w-7xl mx-auto px-4 pt-24 pb-24">
        <div class="section-card p-8 animate-fade-in">
            <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-600 to-blue-400 bg-clip-text text-transparent mb-8">Chrome浏览器扩展能力详解</h1>
            
            <!-- 目录 -->
            <div class="mb-12 p-6 bg-white/95 rounded-lg shadow-sm">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">目录</h2>
                <ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <li><a href="#permissions" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">权限系统</a></li>
                    <li><a href="#core-apis" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">核心API能力</a></li>
                    <li><a href="#storage" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">存储能力</a></li>
                    <li><a href="#network" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">网络请求能力</a></li>
                    <li><a href="#ui" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">用户界面能力</a></li>
                    <li><a href="#system" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">系统集成能力</a></li>
                    <li><a href="#devtools" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">开发者工具能力</a></li>
                    <li><a href="#security" class="block p-3 rounded-lg hover:bg-blue-50 text-blue-600 hover:text-blue-800 transition-colors duration-300">安全与隐私能力</a></li>
                </ul>
            </div>

            <!-- 内容区域 -->
            <div class="space-y-12">
                <!-- 权限系统 -->
                <section id="permissions" class="section-card p-8">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 text-gray-800">权限系统</h2>
                    <p class="mb-4 text-gray-700">Chrome扩展使用声明式权限系统，在manifest.json中声明所需权限。</p>
                    
                    <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">主机权限</h3>
                    <pre><code>{
  "host_permissions": [
    "http://*/*",      // 所有HTTP网站
    "https://*/*",     // 所有HTTPS网站
    "*://*.google.com" // 特定域名
  ]
}</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">可选权限</h3>
                    <ul class="list-disc ml-6 text-gray-700">
                        <li>运行时可动态请求</li>
                        <li>用户可随时撤销</li>
                        <li>通过chrome.permissions API管理</li>
                    </ul>

                    <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">权限级别</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h4 class="font-semibold mb-4 text-gray-800">1. 基础权限</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><code class="inline-code">activeTab</code>: 访问当前活动标签页</li>
                                <li><code class="inline-code">tabs</code>: 访问标签页信息</li>
                                <li><code class="inline-code">bookmarks</code>: 书签管理</li>
                                <li><code class="inline-code">history</code>: 浏览历史访问</li>
                                <li><code class="inline-code">storage</code>: 数据存储</li>
                            </ul>
                        </div>
                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h4 class="font-semibold mb-4 text-gray-800">2. 敏感权限</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><code class="inline-code">webRequest</code>: 网络请求拦截和修改</li>
                                <li><code class="inline-code">proxy</code>: 代理设置</li>
                                <li><code class="inline-code">privacy</code>: 隐私设置</li>
                                <li><code class="inline-code">cookies</code>: Cookie管理</li>
                                <li><code class="inline-code">downloads</code>: 下载管理</li>
                            </ul>
                        </div>
                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h4 class="font-semibold mb-4 text-gray-800">3. 强大权限</h4>
                            <ul class="space-y-2 text-gray-700">
                                <li><code class="inline-code">declarativeNetRequest</code>: 网络请求规则</li>
                                <li><code class="inline-code">system.cpu</code>: CPU信息</li>
                                <li><code class="inline-code">system.memory</code>: 内存信息</li>
                                <li><code class="inline-code">system.storage</code>: 存储信息</li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- 核心API能力 -->
                <section id="core-apis" class="section-card p-8">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 text-gray-800">核心API能力</h2>

                    <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">1. 标签页管理 (chrome.tabs)</h3>
                    <pre><code>// 创建新标签页
chrome.tabs.create({url: "https://example.com"});

// 查询标签页
chrome.tabs.query({active: true}, function(tabs) {});

// 更新标签页
chrome.tabs.update(tabId, {url: "new-url"});

// 移动标签页
chrome.tabs.move(tabId, {index: newIndex});

// 关闭标签页
chrome.tabs.remove(tabId);</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">2. 窗口管理 (chrome.windows)</h3>
                    <pre><code>// 创建新窗口
chrome.windows.create({url: "https://example.com"});

// 获取所有窗口
chrome.windows.getAll({populate: true}, function(windows) {});

// 更新窗口
chrome.windows.update(windowId, {state: "maximized"});</code></pre>

                    <h3 class="text-xl font-semibold mt-6 mb-4 text-gray-800">3. 书签管理 (chrome.bookmarks)</h3>
                    <pre><code>// 创建书签
chrome.bookmarks.create({
  title: "Example",
  url: "https://example.com"
});

// 获取书签树
chrome.bookmarks.getTree(function(bookmarkTreeNodes) {});

// 搜索书签
chrome.bookmarks.search({query: "example"}, function(results) {});</code></pre>
                </section>

                <!-- 存储能力 -->
                <section id="storage" class="section-card p-8">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 text-gray-800">存储能力</h2>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">1. 同步存储</h3>
                            <p class="text-gray-700 mb-4">数据自动同步到用户的Chrome账号</p>
                            <ul class="list-disc ml-6 text-gray-700 mb-4">
                                <li>单个项目：8KB</li>
                                <li>总存储量：100KB</li>
                            </ul>
                            <pre><code>chrome.storage.sync.set({key: value});
chrome.storage.sync.get(['key']);</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">2. 本地存储</h3>
                            <p class="text-gray-700 mb-4">仅存储在本地设备</p>
                            <ul class="list-disc ml-6 text-gray-700 mb-4">
                                <li>存储限制：5MB</li>
                            </ul>
                            <pre><code>chrome.storage.local.set({key: value});
chrome.storage.local.get(['key']);</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">3. 会话存储</h3>
                            <p class="text-gray-700 mb-4">仅在浏览器会话期间有效</p>
                            <ul class="list-disc ml-6 text-gray-700 mb-4">
                                <li>存储限制：10MB</li>
                            </ul>
                            <pre><code>chrome.storage.session.set({key: value});
chrome.storage.session.get(['key']);</code></pre>
                        </div>
                    </div>
                </section>

                <!-- 网络请求能力 -->
                <section id="network" class="section-card p-8">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 text-gray-800">网络请求能力</h2>

                    <div class="space-y-8">
                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">1. 声明式网络请求</h3>
                            <pre><code>{
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">2. 网络请求监听</h3>
                            <pre><code>chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: details.url.indexOf("blocked") != -1};
  },
  {urls: ["<all_urls>"]},
  ["blocking"]
);</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">3. 网络状态</h3>
                            <pre><code>chrome.system.network.getNetworkInterfaces(function(interfaces) {});</code></pre>
                        </div>
                    </div>
                </section>

                <!-- 用户界面能力 -->
                <section id="ui" class="section-card p-8">
                    <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-gray-200 text-gray-800">用户界面能力</h2>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">1. 浏览器按钮</h3>
                            <pre><code>chrome.action.setIcon({path: "icon.png"});
chrome.action.setBadgeText({text: "NEW"});
chrome.action.setPopup({popup: "popup.html"});</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">2. 右键菜单</h3>
                            <pre><code>chrome.contextMenus.create({
  title: "My Menu Item",
  contexts: ["selection"],
  onclick: function(info, tab) {}
});</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">3. 通知</h3>
                            <pre><code>chrome.notifications.create({
  type: "basic",
  iconUrl: "icon.png",
  title: "通知标题",
  message: "通知内容"
});</code></pre>
                        </div>

                        <div class="bg-white/95 p-6 rounded-lg shadow-sm">
                            <h3 class="text-xl font-semibold mb-4 text-gray-800">4. 命令快捷键</h3>
                            <pre><code>{
  "commands": {
    "toggle-feature": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y"
      },
      "description": "Toggle feature"
    }
  }
}</code></pre>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="glass-effect py-3 fixed bottom-0 w-full shadow-lg">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <p class="text-gray-600">ChromeHub &copy; 2024</p>
        </div>
    </footer>
</body>
</html>
